<template>
  <div class="login-page">
    <div class="title">短信登录</div>
    <van-form @submit="onSubmit" class="fbody">
      <van-field v-model="username" name="mobile" placeholder="请输入手机号" :style="{ fontSize: '16px' }" class="phone" :rules="[
        { required: true, message: '请输入手机号' },
        { pattern, message: '手机号格式错误' }
      ]" />
      <van-field v-model="password" name="code" type="password" placeholder="请输入验证码" :style="{ fontSize: '16px' }"
        class="password"></van-field>
      <a class="yanzheng">发送验证码</a>
      <span>{{ time }}</span>
      <div class="btnbox">
        <van-button block native-type="submit" class="loginbtn"
          v-if="username.length === 11 && password.length === 6">登录</van-button>
        <van-button block native-type="submit" class="loginbtn kong" v-else>登录</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>

export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: '',
      pattern: /\d{11}/,
      time: 60
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    }
  }
}
</script>
<style lang="scss" scoped>
.login-page {
  display: flex;
  flex-direction: column;

  .fbody {
    position: relative;
  }

  .yanzheng {
    position: absolute;
    top: 145px;
    right: 33px;
    color: #595769;
  }

  .phone {
    margin-top: 51px;
    width: 309px;
    padding: 0;
    padding-bottom: 20.5px;
    box-sizing: border-box;
    border-bottom: .5px solid #F0F0F0;
    margin-left: 33px;
    margin-right: 33px;
  }

  .password {
    width: 309px;
    padding: 0;
    padding-bottom: 20.5px;
    box-sizing: border-box;
    border-bottom: .5px solid #F0F0F0;
    margin-left: 33px;
    margin-right: 33px;
    padding-top: 38px;
    margin-bottom: 38px;
  }
}

.loginbtn {
  width: 309px;
  height: 49.5px;
  background-image: linear-gradient(-45deg, #FE4F4F 0%, #FC6627 100%);
}

.kong {
  background-image: linear-gradient(-45deg, #FF9999 0%, #FFA179 100%);
}

.title {
  font-size: 24px;
  margin-top: 54px;
  margin-left: 33px;
  color: #333333;
}

.btnbox {
  display: flex;
  justify-content: center;
}
</style>
